<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>后台模板</title>
    <link rel="stylesheet" type="text/css" href="plugins/jquery-easyui-1.5.5.5/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="plugins/jquery-easyui-1.5.5.5/themes/icon.css">
    <script type="text/javascript" src="plugins/jquery-easyui-1.5.5.5/jquery.min.js"></script>
    <script type="text/javascript" src="plugins/jquery-easyui-1.5.5.5/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="plugins/jquery-easyui-1.5.5.5/expands/list-to-tree-data.js"></script>
    <!--<style>-->
        <!--* {-->
            <!--font-family: "Helvetica Neue","Helvetica","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","WenQuanYi Micro Hei","Arial",sans-serif;-->
        <!--}-->
    <!--</style>-->
    <script type="text/javascript">
        $().ready(function() {
            var treeJson = [
					{"id":"440100000000","pid":null,"text":"广州市","iconCls":"tree-folder"},
					{"id":"440101000000","pid":"440100000000","text":"市辖区","iconCls":"tree-folder"},
					{"id":"440103000000","pid":"440100000000","text":"荔湾区","iconCls":"tree-folder"},
					{"id":"440103001000","pid":"440103000000","text":"沙面街道","iconCls":"tree-file"},
					{"id":"440103002000","pid":"440103000000","text":"岭南街道","iconCls":"tree-file"},
					{"id":"440103003000","pid":"440103000000","text":"华林街道","iconCls":"tree-file"},
					{"id":"440103004000","pid":"440103000000","text":"多宝街道","iconCls":"tree-file"},
					{"id":"440103005000","pid":"440103000000","text":"昌华街道","iconCls":"tree-file"},
					{"id":"440103006000","pid":"440103000000","text":"逢源街道","iconCls":"tree-file"},
					{"id":"440103007000","pid":"440103000000","text":"龙津街道","iconCls":"tree-file"},
					{"id":"440104000000","pid":"440100000000","text":"越秀区","iconCls":"tree-folder"},
					{"id":"440104001000","pid":"440104000000","text":"洪桥街道","iconCls":"tree-file"},
					{"id":"440104003000","pid":"440104000000","text":"北京街道","iconCls":"tree-file"},
					{"id":"440104004000","pid":"440104000000","text":"六榕街道","iconCls":"tree-file"},
					{"id":"440104005000","pid":"440104000000","text":"流花街道","iconCls":"tree-file"},
					{"id":"440104007000","pid":"440104000000","text":"光塔街道","iconCls":"tree-file"},
					{"id":"440104010000","pid":"440104000000","text":"人民街道","iconCls":"tree-file"},
					{"id":"440105000000","pid":"440100000000","text":"海珠区","iconCls":"tree-folder"},
					{"id":"440105001000","pid":"440105000000","text":"赤岗街道","iconCls":"tree-file"},
					{"id":"440105002000","pid":"440105000000","text":"新港街道","iconCls":"tree-file"},
					{"id":"440105003000","pid":"440105000000","text":"昌岗街道","iconCls":"tree-file"},
					{"id":"440105005000","pid":"440105000000","text":"滨江街道","iconCls":"tree-file"},
					{"id":"440105006000","pid":"440105000000","text":"素社街道","iconCls":"tree-file"},
					{"id":"440105007000","pid":"440105000000","text":"海幢街道","iconCls":"tree-file"},
					{"id":"440105009000","pid":"440105000000","text":"龙凤街道","iconCls":"tree-file"},
					{"id":"440105010000","pid":"440105000000","text":"沙园街道","iconCls":"tree-file"},
					{"id":"440111000000","pid":"440100000000","text":"白云区","iconCls":"tree-folder"},
					{"id":"440111003000","pid":"440111000000","text":"松洲街道","iconCls":"tree-file"},
					{"id":"440111004000","pid":"440111000000","text":"景泰街道","iconCls":"tree-file"},
					{"id":"440111005000","pid":"440111000000","text":"同德街道","iconCls":"tree-file"},
					{"id":"440111006000","pid":"440111000000","text":"黄石街道","iconCls":"tree-file"},
					{"id":"440111007000","pid":"440111000000","text":"棠景街道","iconCls":"tree-file"},
					{"id":"440111008000","pid":"440111000000","text":"新市街道","iconCls":"tree-file"},
					{"id":"440111009000","pid":"440111000000","text":"同和街道","iconCls":"tree-file"},
					{"id":"440300000000","pid":null,"text":"深圳市","iconCls":"tree-folder"},
					{"id":"440301000000","pid":"440300000000","text":"市辖区","iconCls":"tree-folder"},
					{"id":"440303000000","pid":"440300000000","text":"罗湖区","iconCls":"tree-folder"},
					{"id":"440303001000","pid":"440303000000","text":"桂园街道办事处","iconCls":"tree-file"},
					{"id":"440303002000","pid":"440303000000","text":"黄贝街道办事处","iconCls":"tree-file"},
					{"id":"440303003000","pid":"440303000000","text":"东门街道办事处","iconCls":"tree-file"},
					{"id":"440303004000","pid":"440303000000","text":"翠竹街道办事处","iconCls":"tree-file"},
					{"id":"440303005000","pid":"440303000000","text":"南湖街道办事处","iconCls":"tree-file"},
					{"id":"440303006000","pid":"440303000000","text":"笋岗街道办事处","iconCls":"tree-file"},
					{"id":"440304000000","pid":"440300000000","text":"福田区","iconCls":"tree-folder"},
					{"id":"440304001000","pid":"440304000000","text":"南园街道办事处","iconCls":"tree-file"},
					{"id":"440304002000","pid":"440304000000","text":"园岭街道办事处","iconCls":"tree-file"},
					{"id":"440304004000","pid":"440304000000","text":"福田街道办事处","iconCls":"tree-file"},
					{"id":"440304005000","pid":"440304000000","text":"沙头街道办事处","iconCls":"tree-file"},
					{"id":"440304007000","pid":"440304000000","text":"梅林街道办事处","iconCls":"tree-file"},
					{"id":"440305000000","pid":"440300000000","text":"南山区","iconCls":"tree-folder"},
					{"id":"440305001000","pid":"440305000000","text":"南头街道办事处","iconCls":"tree-file"},
					{"id":"440305002000","pid":"440305000000","text":"南山街道办事处","iconCls":"tree-file"},
					{"id":"440305003000","pid":"440305000000","text":"沙河街道办事处","iconCls":"tree-file"},
					{"id":"440305005000","pid":"440305000000","text":"蛇口街道办事处","iconCls":"tree-file"},
					{"id":"440305009000","pid":"440305000000","text":"西丽街道办事处","iconCls":"tree-file"},
					{"id":"440306000000","pid":"440300000000","text":"宝安区","iconCls":"tree-folder"},
					{"id":"440306001000","pid":"440306000000","text":"新安街道办事处","iconCls":"tree-file"},
					{"id":"440306003000","pid":"440306000000","text":"西乡街道办事处","iconCls":"tree-file"},
					{"id":"440306004000","pid":"440306000000","text":"福永街道办事处","iconCls":"tree-file"},
					{"id":"440306005000","pid":"440306000000","text":"沙井街道办事处","iconCls":"tree-file"},
					{"id":"440306006000","pid":"440306000000","text":"松岗街道办事处","iconCls":"tree-file"},
					{"id":"440306008000","pid":"440306000000","text":"石岩街道办事处","iconCls":"tree-file"},
					{"id":"440307000000","pid":"440300000000","text":"龙岗区","iconCls":"tree-folder"},
					{"id":"440307003000","pid":"440307000000","text":"平湖街道办事处","iconCls":"tree-file"},
					{"id":"440307006000","pid":"440307000000","text":"坪地街道办事处","iconCls":"tree-file"},
					{"id":"440307007000","pid":"440307000000","text":"坪山街道办事处","iconCls":"tree-file"},
					{"id":"440307008000","pid":"440307000000","text":"坑梓街道办事处","iconCls":"tree-file"},
					{"id":"440307009000","pid":"440307000000","text":"葵涌街道办事处","iconCls":"tree-file"},
					{"id":"440307010000","pid":"440307000000","text":"大鹏街道办事处","iconCls":"tree-file"},
					{"id":"440307011000","pid":"440307000000","text":"南澳街道办事处","iconCls":"tree-file"},
					{"id":"440308000000","pid":"440300000000","text":"盐田区","iconCls":"tree-folder"},
					{"id":"440308001000","pid":"440308000000","text":"梅沙街道办事处","iconCls":"tree-file"},
					{"id":"440308002000","pid":"440308000000","text":"盐田街道办事处","iconCls":"tree-file"},
					{"id":"440308003000","pid":"440308000000","text":"沙头角街道办事处","iconCls":"tree-file"}
			];
 			for (var i=0; i<3; i++) {
                var item = "item" + i;
                $('#menuTreeAccordion').accordion('add', {
                    iconCls: 'icon-save',
                    title: '新标题',
                    content: '<div id="' + item + '"></div>',
                    selected: false
                });
                $('#' + item).tree({
					data: treeJson,
					onClick: function (node) {
						//判断是叶子节点且有URL属性
						if (node.hasOwnProperty('children') == false) {
							// easyui提过的API只有通过tab的标题或者下标来判断tab是否存在
							if ($('#mainPageTab').tabs('exists', node.text+node.id)) {
								$('#mainPageTab').tabs('select', node.text+node.id);
							} else {
								$('#mainPageTab').tabs('add', {
									// 在同一个tab面板，如果存在同名的tab页，若此时不一个个打开同名的tab页，无法区分那个tab页对应什么内容，所有官方通过title判断tab页是否存在是有道理的
									title: node.text+'<div style="display:none;">'+node.id+'</div>',
									href:'tableData.html',
									// content: '<div style="padding:10px;">accordion</div>',
									// content = '<iframe scrolling="auto" frameborder="0"  src="'+node.url+'" style="width:100%;height:100%;"></iframe>';
									closable:true
								});
							}
						} else {  // easyui tree当点击父节点时让直系子节点展开
							$(this).tree('toggle', node.target); //单击文本切换展开/折叠节点的状态
						}
					},
					onLoadSuccess:function() {
						$(this).tree("collapseAll");  // 加载成功后，让tree所有的节点折叠起来
					},
					parentField:"pid",
					textFiled:"text",
					idFiled:"id"
				});
			}

			//tab右键触发时候所触发的函数
			$("#mainPageTab").tabs({
				onContextMenu:function(e, title, index) {
					if(index!=0) { // 首页的tab页不显示关闭tab页的右键菜单
						e.preventDefault();
						$("#tab-tools").menu('show', {
							left : e.pageX,
							top : e.pageY
						});
					}
				}
			});

			// tabs右击菜单绑定事件
			$("#tab-tools").menu({
				onClick : function (node) {
					closeTab(this, node.id);
				}
			});
            $('#menuTree .tree-node').css('height','28px');
            $('#menuTree .tree-title').css('font-size','18px');
            $('#menuTree .tree-title').css('height','28px');
            $('#menuTree .tree-title').css('line-height','28px');
            $('#menuTree .tree-title').css('padding','0px');
            $('#menuTree .tree-title').css('margin','0px');

            function setWindowSize() {
                var height = $(window).height()-16;
                $("#outerLayout").attr("style","width:100%;height:"+height+"px");
                $("#outerLayout").layout("resize", {
                    width:"100%",
                    height:height+"px"
                });
            };
            $(document).ready(setWindowSize);
            $(window).resize(setWindowSize);
        });

		//关闭选项卡功能
		function closeTab(menu, id) {
			var tab = $("#mainPageTab").tabs('getSelected');        //当前所选tab
			var index = $("#mainPageTab").tabs('getTabIndex', tab); //当前所选tab的下标位置
			var tablist = $("#mainPageTab").tabs('tabs');           //所有的tabs列表
			switch (id) {
				case 'closeSelf': //关闭当前标签
					$("#mainPageTab").tabs("close", index);
					break;
				case 'closeOthor': //关闭其他标签
					for (var i=tablist.length-1; i>index; i--) { // 关闭右侧
						$("#mainPageTab").tabs('close',i);
					}
					var num = index-1;
					for (var i=num; i>=1; i--) { // 关闭左侧
						$("#mainPageTab").tabs('close', 1);
					}
					break;
				case 'closeLeft': //关闭左侧
					var num = index-1;
					for (var i=num; i>=1; i--) {
						$("#mainPageTab").tabs('close', 1);
					}
					break;
				case 'closeRight': //关闭右侧
					for(var i=tablist.length-1; i>index; i--) {
						$("#mainPageTab").tabs('close',i);
					}
					break;
				case 'closeAll': //关闭所有
					for (var i=tablist.length-1; i>=0; i--) {
						if (i!=0) {
							$("#mainPageTab").tabs("close", i);
						}
					}
					break;
				default:
			}
		}
    </script>

</head>
<body>
<div id="outerLayout" class="easyui-layout">
    <div data-options="region:'north'" style="height:50px"></div>
	<div data-options="region:'west', split:true" title="菜单导航栏" style="width:250px;">
		<div id="menuTreeAccordion" class="easyui-accordion" data-options="fit:true,border:false,animate:false"></div>
	</div>
    <div data-options="region:'center'">
        <div id="mainPageTab" class="easyui-tabs" style="width:100%;height:100%">
			<div title="首页">
				<div align="center" style="padding-top: 100px;"><font color="red" size="8">首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页</font></div>
			</div>
			<!-- 以下为tabs右击事件 -->
			<div id="tab-tools" class="easyui-menu" style="width:135px; display:none">
				<div id="closeSelf" data-options="iconCls:'icon-cross'">关闭当前标签</div>
				<div id="closeOthor" data-options="iconCls:'icon-cross'">关闭其他标签</div>
				<div class="menu-sep"></div>
				<div id="closeLeft" data-options="iconCls:'icon-cross'">关闭左侧标签</div>
				<div id="closeRight" data-options="iconCls:'icon-cross'">关闭右侧标签</div>
				<div class="menu-sep"></div>
				<div id="closeAll" iconCls="icon-cancel">关闭所有标签</div>
			</div>
		</div>
    </div>
</div>
</body>
</html>